<template>
  <Anchor wrapperClass="detail-anchor" :targetOffset="150" >
    <AnchorLink v-for="link in links" :key="link.key" :href="link.key" :title="link.title"  />
  </Anchor>
</template>


<script lang="ts">
import { defineComponent, toRefs } from 'vue';
import { Anchor } from 'ant-design-vue';

import { detailProps } from './types';

export default defineComponent({
  components: { Anchor, AnchorLink: Anchor.Link },
  props: detailProps,
  setup(props) {
    let { links } = toRefs(props);
    

    return {
      links
    }
  },
})
</script>

<style lang="less" scoped>
::v-deep(.detail-anchor) {
  padding: 14px 20px;
  margin: 0 !important;
  box-shadow: 0 3px 6px rgb(0 0 0 / 5%);
  
  .ant-anchor {
    display: flex;  

    .ant-anchor-ink {
      display: none;
    }

    .ant-anchor-link {
      padding: 6px 12px;
      font-size: 14px;
      line-height: 20px;
      
      &.ant-anchor-link-active {
        background: #386BF3;

        >.ant-anchor-link-title {
          color: @white;
        }
      }

      &+.ant-anchor-link {
        margin-left: 26px;
      }
    }
  }
}
</style>


